<template>
  <div class="home">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="icon-tab" @click="drawer = true;" type="primary" style="margin-left: 16px;">
          <i class="el-icon-s-unfold" style="font-size: 25px"></i>
        </div>

        <div class="card">
          <!-- <el-tabs
            lazy
            @tab-click="switchPath(tab)"
            @tab-remove="removeTab(index, tab.path, $route.path)"
            :closable="closable"
            type="border-card"
            v-for="(tab, index) in tabs"
            :key="index"
          >
            <el-tab-pane :class="$route.path===tab.path?'Highlight':'default'" :label="tab.name"></el-tab-pane>
          </el-tabs> -->
          <TabView v-for="(tab, index) in tabs" :key="index" :closable="closable" :Title="tab.name"
            @TabClick="switchPath(tab)" @RemoveTab="removeTab(index, tab.path, $route.path)"
            :class="tab.path === $route.path ? 'Highlight' : 'default'" />
        </div>

        <el-menu router :default-active="$router.path" @select="Logout" class="el-menu-demo" mode="horizontal">
          <el-submenu index="individual">
            <template slot="title">
              <div class="icon-individual">
                <i class="el-icon-user-solid" style="font-size: 25px"></i>
              </div>
            </template>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/Login">退出登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <transition name="box" mode="out-in">
        <router-view class="Router"></router-view>
      </transition>
    </el-card>

    <el-drawer wrapperClosable direction="ltr" append-to-body modal-append-to-body modal destroy-on-close
      close-on-press-escape :visible.sync="drawer" :with-header="false">
      <menuList @CloseDrawer="CloseDrawer" :list="menus" :isCollapse="isCollapse"></menuList>
    </el-drawer>
  </div>
</template>

<script>
import menuList from "./menuList";
import TabView from "./TabView.vue";

export default {
  name: "HomeView",
  components: {
    menuList,
    TabView
  },
  data() {
    return {
      drawer: false,
      activePath: "/Login",
      menus: "",
      isCollapse: false,
      tabs: [],
      direction: "right"
    };
  },
  computed: {
    closable() {
      if (this.tabs.length > 1) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    Logout(key, keyPath) {
      if (key === "/Login") {
        this.$store.commit("empty");
      } else {
        if (key === "/") {
          this.$store.commit('setTab', this.menus[0])
        }
      }
    },
    switchPath(tab) {
      if (this.$route.path !== tab.path) {
        this.$router.push(tab.path);
      }
    },
    removeTab(index, TabPath, path) {
      this.$store.commit("removeTab", index);
      if (TabPath === path) {
        if (this.tabs[index]) {
          this.$router.push(this.tabs[index].path);
        } else {
          this.$router.push(this.tabs[index - 1].path);
        }
      }
    },
    CloseDrawer(Boolean){
      this.drawer=Boolean.drawer
    }
  },
  async created() {
    await this.$api
      .get("/menus")
      .then(res => {
        this.menus = res.data.menus;
      })
      .catch(error => {
        if (error.response && error.response.status === 405) {
          return;
        }
      });
    if (this.$store.state.Tabs.length === 0) {
      let tab = this.menus[0];
      this.$store.commit("setTab", tab);
    }
    this.tabs = this.$store.state.Tabs;
  }
};
</script>
<style scoped>
@import url('@/assets/css/default.css');
</style>